<template>
    <!-- <el-card> -->
    <div class="doctor-detail">
        <!-- 标题 -->
        <div class="title">
            <h2>医生详情</h2>
        </div>

        <div v-if="loading" class="loading">
            <el-skeleton :rows="10" animated />
        </div>

        <div v-else-if="doctorInfo" class="detail-content">
            <!-- 医生信息 - 完全按照图片布局 -->
            <div class="section">
                <h3 class="section-title">医生信息</h3>

                <!-- 第一行：医生编号、医生姓名、医生头像、联系电话 -->
                <el-row :gutter="20" class="info-row">
                    <el-col :span="6">
                        <div class="info-item">
                            <span class="label">医生编号</span>
                            <span class="value">{{ doctorInfo._id || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-item">
                            <span class="label">医生姓名</span>
                            <span class="value">{{ doctorInfo.name || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-item">
                            <span class="label">医生头像</span>
                            <div class="avatar-container">
                                <el-avatar :size="60" :src="doctorInfo.avatar">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </el-avatar>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-item">
                            <span class="label">联系电话</span>
                            <span class="value">{{ doctorInfo.phone || '' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <!-- 第二行：性别 -->
                <el-row :gutter="20" class="info-row">
                    <el-col :span="6">
                        <div class="info-item">
                            <span class="label">性别</span>
                            <span class="value">{{ getGenderText(doctorInfo.gender) }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 医生简介 -->
            <div class="section">
                <h3 class="section-title">医生简介</h3>
                <div class="intro-content">
                    {{ doctorInfo.intro || '' }}
                </div>
            </div>

            <!-- 医生擅长 -->
            <div class="section">
                <h3 class="section-title">医生擅长</h3>
                <div class="skill-content">
                    {{ doctorInfo.skill || '' }}
                </div>
            </div>

            <!-- 加入团队 -->
            <div class="section">
                <h3 class="section-title">加入团队</h3>
                <div class="team-content">
                    <div v-if="doctorInfo.teamIds && doctorInfo.teamIds.length > 0">
                        <div v-for="team in doctorInfo.teamIds" :key="team._id" class="team-item">
                            {{ getTeamDisplayText(team) }}
                        </div>
                    </div>
                    <div v-else></div>
                </div>
            </div>

            <!-- 签约人数 -->
            <div class="section">
                <h3 class="section-title">签约人数</h3>
                <div class="sign-content">
                    <span v-if="doctorInfo.teamIds && doctorInfo.teamIds.length > 0">
                        {{ doctorInfo.teamIds[0]?.signNumber || '' }}
                    </span>
                    <span v-else></span>
                </div>
            </div>

            <!-- 医生评分 -->
            <div class="section">
                <h3 class="section-title">医生评分</h3>
                <div class="rating-content">
                    <span v-if="doctorInfo.teamIds && doctorInfo.teamIds.length > 0">
                        {{ doctorInfo.teamIds[0]?.rate || '' }}
                    </span>
                    <span v-else></span>
                </div>
            </div>

            <!-- 创建时间 -->
            <!-- <div class="section">
                <h3 class="section-title">创建时间</h3>
                <div class="time-content">
                    {{ formatDate(doctorInfo.createTime) || '' }}
                </div>
            </div> -->

            <!-- 创建人 -->
            <!-- <div class="section">
                <h3 class="section-title">创建人</h3>
                <div class="creator-content">
                    {{ doctorInfo.creatorName || '' }}
                </div>
            </div> -->

            <!-- 繁忙状态 -->
            <div class="section">
                <h3 class="section-title">繁忙状态</h3>
                <div class="status-content">
                    <el-switch v-model="busyStatus" active-text="繁忙" inactive-text="空闲" />
                </div>
            </div>

            <!-- 操作按钮区域 - 放在页面底部 -->
            <div class="action-buttons">
                <el-button type="primary" @click="handleSendMessage">发送消息</el-button>
                <el-button type="primary" @click="handleEdit">编辑医生信息</el-button>
                <el-button type="danger" @click="handleDelete">删除</el-button>
                <el-button @click="handleBack">返回</el-button>
            </div>
        </div>

    </div>
    <!-- </el-card> -->
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { getDoctorsDetailApi, deleteDoctorsApi } from '@/api/doctors'

// 路由实例
const route = useRoute()
const router = useRouter()

// 定义事件
const emit = defineEmits(['back'])

// 定义props（保持兼容性）
const props = defineProps<{
    doctorId?: string
}>()

// 获取医生ID（优先从路由参数获取，其次从props获取）
const doctorId = computed(() => {
    return route.params._id as string || props.doctorId
})

// 响应式数据
const loading = ref(false)
const doctorInfo = ref<any>(null)
const busyStatus = ref(true)

// 获取医生详情
const getDoctorDetail = async () => {
    if (!doctorId.value) return

    loading.value = true

    const res = await getDoctorsDetailApi({ _id: doctorId.value })
    console.log('医生详情API响应:', res)

    if (res.code === 200) {
        doctorInfo.value = res.data
    } else {
        ElMessage.error(res.data.message)
    }

    loading.value = false
}

// 格式化性别
const getGenderText = (gender: number) => {
    return gender === 1 ? '男' : gender === 0 ? '女' : '-'
}

// 格式化团队显示文本
const getTeamDisplayText = (team: any) => {
    const parts = []

    // 机构名称
    if (team.organizationId?.name) {
        parts.push(team.organizationId.name)
    }

    // 团队名称
    if (team.name) {
        parts.push(team.name)
    }

    // 角色名称（从医生的角色信息获取）
    if (doctorInfo.value?.roleId?.name) {
        parts.push(doctorInfo.value.roleId.name)
    }

    return parts.join('/')
}

// 格式化日期
const formatDate = (dateString: string) => {
    if (!dateString) return '-'
    return new Date(dateString).toLocaleString('zh-CN')
}

// 返回上一页
const handleBack = () => {
    router.back()
}

// 发送消息
const handleSendMessage = () => {
    ElMessage.info('发送消息功能待开发')
    // TODO: 实现发送消息功能
}

// 编辑医生
const handleEdit = () => {
    if (!doctorId.value) {
        ElMessage.error('医生ID不能为空')
        return
    }
    router.push(`/data/doctor/update/${doctorId.value}`)
}

// 删除医生
const handleDelete = async () => {
    if (!doctorId.value) {
        ElMessage.error('医生ID不能为空')
        return
    }

    await ElMessageBox.confirm(
        '医生信息删除后无法恢复，确定要删除吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )

    const res = await deleteDoctorsApi({ _id: doctorId.value })

    if (res.code === 200) {
        ElMessage.success('删除成功')
        // 删除成功后返回列表页
        router.push('/data/doctor/list')
    } else {
        ElMessage.error(res.message || '删除失败')
    }
}

// 生命周期
onMounted(() => {
    getDoctorDetail()
})

// 暴露方法
defineExpose({
    getDoctorDetail
})
</script>

<style scoped>
.doctor-detail {
    padding: 20px;
}

.title {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F7FB;
}

.title h2 {
    margin: 0;
    font-weight: 500;
    color: #333;
    position: relative;
    padding-left: 12px;
}

.title h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #409EFF;
    border-radius: 2px;
}

.loading {
    padding: 20px;
}

.detail-content {
    margin-bottom: 30px;
}

.section {
    margin-bottom: 25px;
}

.section-title {
    font-size: 13px;
    font-weight: 500;
    color: #999999;
    margin-bottom: 15px;
}

/* 医生信息标题特殊样式 */
.section:first-child .section-title {
    font-size: 16px;
    color: #333;
}

.info-row {
    margin-bottom: 20px;

    /* border: 1px solid purple; */

    display: flex;
    align-items: center;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.label {
    font-size: 13px;
    font-weight: 500;
    color: #999999;
    width: 80px;
    flex-shrink: 0;
    margin-right: 10px;
}

.value {
    flex: 1;
}

.avatar-container {
    display: flex;
    align-items: center;
}

.intro-content,
.skill-content {
    margin-left: 20px;
}

.team-content,
.sign-content,
.rating-content,
.time-content,
.creator-content,
.status-content {
    background: #fafafa;
    padding: 15px 20px;
    border-radius: 6px;
    color: #333;
    line-height: 1.6;
}

.team-item {
    margin-bottom: 8px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid #F2F7FB;
    justify-content: flex-start;
}
</style>
